<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/coen/dingwei.svg" mode="widthFix" @click="getMapAddress()">{{address}}</image>
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search" @click="seaRch()">
				<image src="../../../static/coen/sousuo.svg" mode="widthFix" class="search-img"></image>
				<input type="text" placeholder="烧腊" disabled />
			</view>
		</view>
		<!-- 自定义轮播 -->
		<view class="swiper-view">
			<swiper class="swiper">
				<swiper-item>
					<view class="swiper-item">
						<view class="conteng-img" v-for="(listdata,index) in lable" :key="index">
							<image :src="listdata.img" mode="" class="uploadimg"></image>
							<text>{{listdata.title}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../../api/qqmap-wx-jssdk.js'
	// 导入数据模块
	import {Lable} from '../../../jsdata/data.js'
	export default {
		data() {
			return {
				num: 0,
				address: '',
				lable:Lable
			}
		},

		methods: {
			// 定位
			getMapAddress() {
				const that = this
				const tMap = new QQMapWX({
					key: 'S2KBZ-27YR3-FZ634-3NMKF-DLVDS-RTFJ2' //开发者密钥
				});
				//使用 uni.getLocation获取用户所在经纬度
				uni.chooseLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						console.log(res);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
						tMap.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: function(res) {
								console.log(this)
								console.log(that)
								that.address = ''
								that.address = res.result.address
								console.log(123)
								console.log(that.address)
								//保存缓存
								uni.setStorage({
									key: 'local',
									data: res.result.address,
									success() {
										console.log("用户地址信息已缓存")
									}
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
						})
					}
				})
			},
			// 到搜索页面
			seaRch() {
				wx.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../../css/search.css'
</style>
